<template>
    <div>
        <el-dialog :title="dialog.title" :visible.sync="dialog.open" width="max-content" append-to-body center>
            <el-row style="position: relative;">
                <el-button :class="['refresh', loading ? 'rotate-cartoon' : '']" type="success" plain circle
                    icon="el-icon-refresh-right" size="small" @click="getData"></el-button>
                <el-table :data="tableList" :fit="true" highlight-current-row>
                    <el-table-column type="index" label="序号" align="center" width="100px">

                    </el-table-column>
                    <el-table-column prop="equipName" label="设备名称" width="150px" align="center">

                    </el-table-column>
                    <el-table-column prop="equipCode" label="设备编号" width="150px" align="center">

                    </el-table-column>
                    <el-table-column prop="alarmTrigger" label="触发类型" width="150px" align="center">
                        <template slot-scope="scope">
                            <div :style="{ color: scope.row.alarmTrigger === 1 ? 'red' : 'green' }">
                                {{ formatAlarmTrigger(scope.row.alarmTrigger) }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="alarmType" label="报警类型 " width="150px" align="center">
                        <template slot-scope="scope">
                            <div style="color: red;">
                                {{ formatAlarmType(scope.row.alarmType) }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="content" label="报警内容" width="200px" align="center">
                        <template slot-scope="scope">
                            <div>
                                {{scope.row.content}}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="alarmState" label="处理状态" width="150px" align="center">
                      <template slot-scope="scope">
                        <div :style="{ color: scope.row.alarmState === 1 ? 'red' : 'green' }">
                          {{ formatAlarmState(scope.row.alarmState) }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="createDate" label="报警时间" width="200px" align="center">

                    </el-table-column>
                </el-table>
            </el-row>

        </el-dialog>

    </div>
</template>
<script>
import SmokeApi from '@/api/equip/smoke';
export default {
    data() {
        return {
            dialog: {
                open: false,  // 默认隐藏
                title: "",
            },
            equipId: "",
            loading: false,
            tableList: []
        }
    },
    created() {
        this.init();
    },
    methods: {
        init() {
            this.$Utils.clearData(this.tableList);
        },
        handleCreate(val) {
            // 父组件 调用子组件
            this.dialog.open = true; // 显示弹出框
            this.dialog.title = "报 警 记 录";
            this.equipId = val
            this.getData()
        },
        getData() {
            var cond = {
                equipId: this.equipId
            }
            SmokeApi.getAlarmLogList(cond)
                .then(res => {
                    this.tableList = res.data
                })
        },
        formatAlarmTrigger(cellValue) {
            if (cellValue === 1) {
                return "报警"
            } else if (cellValue === 0) {
                return "恢复"
            }
        },
        formatAlarmState(cellValue) {
          if (cellValue === 1) {
            return "报警中"
          } else if (cellValue === 2) {
            return "已处理"
          }
        },
        formatAlarmType(cellValue) {
            switch (cellValue) {
                case "fire":
                    return "火警";
                case "gasLeak":
                  return "燃气泄漏";
                case "lockOpen":
                  return "异常开门";
                case "soak":
                  return "水浸溢水";
                case "sos":
                  return "紧急求助";
                case "fall":
                  return "跌倒求救";
                case "help":
                  return "120求救";
                case "infra":
                  return "红外异常";
                case "body":
                  return "有人报警";
                case "nobody":
                  return "无人报警";
                case "sleep":
                  return "睡眠异常";
                case "highSugar":
                  return "高糖报警";
                case "lowSugar":
                  return "低糖报警";
                case "highPressure":
                  return "高压报警";
                case "normal":
                  return "报警恢复";
                case "lowPower":
                    return "低电报警";
                case "open":
                    return "防拆报警";
                case "trouble":
                    return "故障报警";
                case "test":
                    return "测试报警";
                case "temp":
                    return "温度报警";
                case "error":
                    return "异常警告";
                default:
                    return ""
            }
        },

    }
}
</script>

<style lang="scss" scoped>
.refresh {
    position: absolute;
    left: 20px;
    z-index: 9999;
    top: -65px;
    font-size: 16px;

}

.rotate-cartoon {
    animation: cartoon .5s linear 0s infinite backwards;
    // -webkit-animation:cartoon .3s linear 0  infinite
}

@keyframes cartoon {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}
</style>
